<template>
  <div class="filter">
    <div class="up">
      <div class="filter-item">
        <label for="">上课时间：</label>
        <DatePicker
          type="daterange"
          placement="bottom-end"
          clearable
          style="width: 200px"
          @on-change="dateChange"
        ></DatePicker>
      </div>
      <div class="filter-item">
        <label for="">会员名称：</label>
       <Input
        v-model="selectVipName"
        placeholder="请输入"
        style="width: 200px"
        clearable
      />
      </div>
      <div class="filter-item">
        <label for="">课程名称：</label>
        <Select
          v-model="selectCourseId"
          style="width: 100px"
          clearable
        >
          <Option
            v-for="item in courseTypeList"
            :value="item.courseId"
            :key="item.courseId"
            >{{ item.courseName }}</Option
          >
        </Select>
      </div>
      <div class="filter-item">
        <Button type="info" @click="initGet">查询</Button>
      </div>
    </div>

    <div class="table">
      <Table
        ref="table"
        :columns="coachCourseColumns"
        :data="coachCourseData"
        border
        height="500"
      ></Table>
    </div>
    <div class="page">
      <Page :total="total" show-elevator show-total @on-change="pageChange" />
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      pageNo: 1,
      total: 0,
      coachId: -1,
      coachCourseColumns: [
        {
          type: "index",
          title: "序号",
          width: 100,
        },
        {
          title: "课程名称",
          key: "courseName",
          align: "center",
          width: 150,
        },
        {
          title: "会员名称",
          key: "vipName",
          align: "center",
          width: 150,
        },
        {
          title: "添加时间",
          key: "creationDate",
          align: "center",
          width: 200,
        },
        {
          title: "上课时间",
          key: "useDate",
          align: "center",
          width: 200,
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  props: {
                    type: "info",
                  },
                },
                params.row.status == 0 ? "待上课" : "已上课"
              ),
            ]);
          },
        },
      ],
      coachCourseData: [],
      dateRange: [],
      selectCourseId: 0,
      selectVipName:'',
    };
  },
  computed: {
    courseTypeList() {
      return this.$store.getters.courseTypeList;
    },
  },
  methods: {
    initGet(){
      this.pageNo = 1;
      this.getCoachCourse();
    },
    getCoachCourse() {
      axios
        .post(
          "/api/gym/course/getCoachCourse",
            {
              pageNo:this.pageNo,
              coachId:this.coachId,
              courseId:this.selectCourseId?this.selectCourseId:0,
              vipName:this.selectVipName,
              beginDate:this.dateRange[0]?this.dateRange[0]:"",
              endDate:this.dateRange[0]?this.dateRange[1]:""
            }
        )
        .then((res) => {
          this.coachCourseData = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
    pageChange(e) {
      this.pageNo = e;
      this.getCoachCourse();
    },
    dateChange(e) {
      this.dateRange = e;
    },
  },
};
</script>

<style>
.filter {
  display: flex;
  flex-wrap: wrap;
}
.filter-item {
  margin-left: 20px;
  margin-top: 10px;
  display: inline;
}
</style>